<template>
	<view>
		<search-nav :content="content">
		</search-nav>
		<view class="top-param">
			<view class="top-param-item" v-for="(item,index) in searchParam" :key="index" @tap="clickSearchParam(index)">
				<text :class="index===currentIndex?'main-text-color':''">{{item.name}}</text>
				<view>
					<view :class="item.status===0&&index===currentIndex?'main-text-color':''" class="iconfont icon-paixu-shengxu icon-search"></view>
					<view :class="item.status===1&&index===currentIndex?'main-text-color':''" class="iconfont icon-paixu-jiangxu icon-search"></view>
				</view>
			</view>
			<view class="top-param-item"  @tap="openPopue(4)">
				<text :class="currentIndex==4?'main-text-color':''">筛选</text>
			</view>
		</view>
		
		<good-list></good-list>
		<uni-popup ref="popup" type="bottom">
			<!--  引入彈框。弹框默认是透明黑色，需要手动背景颜色为白色 -->
			<view class="padding-y-20" style="background-color: #FFFFFF;">
				<view class="margin-x-20" v-for="(item1,index) in popueItem" :key="index">
					<view class="font-size-30 font-weight-700">
						<text style="border-bottom: 6rpx solid #FD6801;">{{item1.title}}</text>
					</view>
					<view class="flex flex-align-items  flex-wrap ">
						<!--  -->
						<view 
						class="text-align-center  flex-grow-1 font-size-30 list-item margin-x-10  padding-y-15 margin-y-20"
						 style="width: 150rpx;"
						v-for="(itemt,index2) in item1.list" :key="index2"
						:style="itemt.selects?'background-color: #FF6600; color: #FFFFFF;':''"
						@tap="clickItem(itemt)">{{itemt.name}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import searchNav from "../../componets/search/search-nav.vue"
	import uniPopup from '@/componets/uni-popup/uni-popup.vue'
	import goodList from "../../componets/search-list/goods-list.vue"
	export default {
		components: {
			searchNav,
			uniPopup,
			goodList
		},
		data() {
			return {
				content: '',
				currentIndex: 0,
				searchParam: [{
						name: "综合",
						status: 1
					},
					{
						name: "销量",
						status: 0
					},
					{
						name: "价格",
						status: 0
					},
				],
				popueItem:[
						{
							title:"配送",
							"list":[
								{name:"顺丰快递",selects:false},
								{name:"韵达快递",selects:false},
								{name:"菜鸟驿站",selects:false},
								{name:"京东物流",selects:false},
								{name:"圆通快递",selects:false},
								{name:"中通快递",selects:false},
								{name:"天天快递",selects:false},
								{name:"申通快递",selects:false},
								]
						},
						{
							title:"商家服务",
							list:[
								{name:'秒杀活动',selects:false},
								{name:"拼团活动",selects:false},
								{name:"预售活动",selects:false},
								{name:"满减活动",selects:false},
								]
						},
						{
							title:"热门分类",
							list:[
								{name:'衣服',selects:false},
								{name:'裤子',selects:false},
								{name:'电器',selects:false},
								{name:'手机',selects:false},
								]
						}
				]
					
				
			}
		},
		onLoad(option) {
			this.content = option.content;
		},
		methods: {
			clickSearchParam(index) {
				//判断当前点击的是否是激活状态
					if (this.currentIndex === index) {
						this.searchParam[index].status = this.searchParam[index].status == 1 ? 0 : 1;
					} else {
						this.currentIndex = index;
						this.searchParam[index].status = 0;
					}
			},
			openPopue(index) {
				this.currentIndex=index;
				this.$refs.popup.open()
			},
			clickItem(item){
				item.selects=!item.selects;
			}
		}
	}
</script>

<style lang="less">
	.top-param {
		display: flex;
		align-items: center;

		.top-param-item {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
			font-size: 30rpx;
			font-weight: 600;
			border-bottom: 1rpx solid #F1F1F1;
			color: #8A8A8A;

			//把顶部的小图标的行高设置成0，表示没有行高，那么上下箭头就在一块了，否则他们上下会有距离
			.icon-search {
				line-height: 0;
			}
		}
	}
	
	.list-item{
		background-color: #F1F1F1;
		color: #4D4D4D;
		border-radius: 10rpx;
	}
</style>
